// 公共上传弹窗

import pdf from '@/assets/pdf.png';
import icon from '@/assets/upload_icon.png';
import { useGetToken } from '@/utils/request';
import type { GetProp, UploadProps } from 'antd';
import { Button, Col, Modal, Row, Upload, message } from 'antd';
import { useEffect, useState } from 'react';
import { useIntl } from 'umi';

const { Dragger } = Upload;
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

type Props = {
  visible: boolean;
  handleCancel: () => void;
  value: string[];
  title?: string;
  subTitle?: string;
  type: string;
  disabled?: boolean;
  onChange: (value: Record<string, any>) => void;
};
const CommonModal: React.FC<Props> = ({
  visible,
  handleCancel,
  value = [],
  onChange,
  title,
  subTitle,
  type,
  disabled = false,
}) => {
  const intl = useIntl();
  const [val, setVal] = useState<any[]>(value);
  const { token, urlAction } = useGetToken();
  useEffect(() => {
    if (visible) {
      setVal(value);
    }
  }, [value, visible]);

  const beforeUpload = (file: FileType) => {
    const isLt20M = file.size / 1024 / 1024 < 20;
    if (!isLt20M) {
      message.error(intl.formatMessage({ id: 'home.live_max' }));
    }
    return isLt20M || Upload.LIST_IGNORE;
  };

  return (
    <Modal
      className="live"
      footer={false}
      width={660}
      closeIcon={null}
      open={visible}
      destroyOnClose
      styles={{
        content: {
          padding: '40px',
        },
      }}
    >
      <div style={{ fontWeight: 'bold', fontSize: 23 }}>{title}</div>
      <div style={{ color: '#999', margin: '10px 0 24px' }}>{subTitle}</div>
      <Dragger
        action={urlAction}
        headers={{ Authorization: `Bearer ${token}` }}
        multiple
        accept=".jpg,.png,.pdf,.jpeg"
        disabled={disabled}
        maxCount={10}
        iconRender={(file) => {
          const { type = '', url = '' } = file;
          if (type.indexOf('pdf') > -1 || url?.includes('.pdf')) {
            return <img style={{ height: '58%', display: 'inherit' }} src={pdf} />;
          }
        }}
        onChange={(info) => {
          let newFileList = [...info.fileList];
          newFileList = newFileList.map((file) => {
            const { status, response, url = '' } = file;

            if (status == 'done' && !url) {
              if (response?.code == '100200') {
                file.url = file.response.data;
              } else {
                file.status = 'error';
                message.error({
                  key: 'update',
                  content: response?.message || 'error',
                });
              }
            }

            return file;
          });
          setVal(newFileList);
        }}
        fileList={val}
        listType="picture-card"
        beforeUpload={beforeUpload}
        style={{ padding: '24px 0' }}
      >
        <img src={icon} width={50} />
        <div style={{ marginTop: 16 }}>{intl.formatMessage({ id: 'home.dorp' })}</div>
        <div style={{ color: '#999' }}>{intl.formatMessage({ id: 'home.live' })}</div>
      </Dragger>
      <Row gutter={[24, 0]} style={{ marginTop: 40 }} justify="center">
        <Col span={12}>
          <Button onClick={handleCancel} className="cancel_btn">
            {intl.formatMessage({ id: 'home.cancel' })}
          </Button>
        </Col>
        {!disabled && (
          <Col
            span={12}
            onClick={() => {
              onChange({
                [type]: val,
              });
              handleCancel();
            }}
          >
            <Button style={{ width: '100%', height: '60px' }} type="primary">
              {intl.formatMessage({ id: 'home.sure' })}
            </Button>
          </Col>
        )}
      </Row>
    </Modal>
  );
};

export default CommonModal;
